<template>
	<view class="chooseTime">
		<view class="timeBtn" @click="showDatePicker">{{selectedTimeStr}}
			<u-icon class="timeBtn-arrowDown" name="arrow-down-fill" color="#4EAAE6" size="19"></u-icon>
		</view>
		<view class="typeChange">
			<u-subsection :list="typeChangeList" :current="curTimeType" mode="subsection" height="50" active-color="#4EAAE6" inactive-color="#FFFFFF" font-size="25" @change="timeTypeChange"></u-subsection>
		</view>
		
		<!-- 时间选择器 -->
		<u-select v-if="curTimeType == 1" v-model="isTimePickerShow" :default-value=selectDefaultValue :list="timeParamsQuarterList" mode="mutil-column-auto"
			@confirm="curTimeChangeSelect"></u-select>
		<u-picker v-else mode="time" v-model="isTimePickerShow" :default-time="pickerDefaultTime" :params="curTimeParams" @confirm="curTimeChangePicker"></u-picker>
	</view>
</template>

<script>
	export default {
		name:"chooseTime",
		data() {
			return {
				//日期选择Picker是否展示
				isTimePickerShow: false,
				curTimeType: 0,//当前日期形式：0-月；1-季；2-年 
				typeChangeList: [{
					name: '月'
				},{
					name: '季'
				},{
					name: '年'
				}],
				//选中的时间_用于与后台交互：月与季格式 2021-09；年格式 2021
				selectedTime: '',
				//选中的时间字符串_用于页面展示
				selectedTimeStr: '',
				curTimeParams: {}, //当前使用的时间展示参数
				timeParamsMonth: {
					year: true,
					month: true,
				},
				timeParamsQuarterList: [],
				timeParamsYear: {
					year: true,
				},
				selectDefaultValue: [],
				pickerDefaultTime: ''
			};
		},
		created() {
			this.timeParamsQuarterList = [];
			for (let i = 0; i < 99; i++) {
				let yearMap = {
					value: 1950 + i ,
					label: 1950 + i + '年',
					children: [{
						value: 1,
						label: '第一季度',
					}, {
						value: 2,
						label: '第二季度',
					}, {
						value: 3,
						label: '第三季度',
					}, {
						value: 4,
						label: '第四季度',
					}]
				};
				this.timeParamsQuarterList.push(yearMap);
			}
			
			this.resetNowTimeWithType(this.curTimeType);
		},
		methods: {
			//显示时间选择器
			showDatePicker() {
				this.isTimePickerShow = true;
			},
			
			//重置当前时间
			//type： 0-月；1-季；2-年 
			resetNowTimeWithType(type) {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (month <= 9) {
					month = "0" + month;
				}
				if (type == 0) {//月
					this.selectedTime = year + '-' + month;
					this.selectedTimeStr = year + '-' + month;
					this.pickerDefaultTime = "";
					this.curTimeParams = this.timeParamsMonth;
				} else if (type == 1) {//季
					let quarter = 0;
					let quarterMonth = '';//本季度最后一个月。如第二季度为06
					let quarterStr = '';
					if (month / 3 <= 1) {
						quarter = 1;
						quarterMonth = '03';
						quarterStr = '第一季度';
					} else if (month / 3 <= 2) {
						quarter = 2;
						quarterMonth = '06';
						quarterStr = '第二季度';
					} else if (month / 3 <= 3) {
						quarter = 3;
						quarterMonth = '09';
						quarterStr = '第三季度';
					} else if (month / 3 <= 4) {
						quarter = 4;
						quarterMonth = '12';
						quarterStr = '第四季度';
					}
					this.selectedTime = year + '-' + quarterMonth;
					this.selectedTimeStr = year + '年' + quarterStr;
					this.selectDefaultValue = [year-1950, quarter-1];
				} else if (type == 2) {
					this.selectedTime = year;
					this.selectedTimeStr = year + '年';
					this.pickerDefaultTime = "";
					this.curTimeParams = this.timeParamsYear;
				}
				this.$emit('curTimeChange');
			},
			
			//当前时间改变-select选择器确认按钮回调
			curTimeChangeSelect(e) {
				let year = e[0].value;
				let yearStr = e[0].label;
				let quarter = e[1].value;
				let quarterStr = e[1].label;
				//页面刷新
				if(quarter*3 < 10) {
					this.selectedTime = year + '-0' + quarter*3;
				} else {
					this.selectedTime = year + '-' + quarter*3;
				}
				this.selectedTimeStr = yearStr + quarterStr;
				this.selectDefaultValue = [year-1950, quarter-1];
				this.$emit('curTimeChange');
			},
			
			//当前时间改变-picker选择器确认按钮回调
			curTimeChangePicker(e) {
				let year = e.year;
				let month = e.month;
				//页面刷新
				if (this.curTimeType == 0) {
					this.selectedTime = year + '-' + month;
					this.selectedTimeStr = year + '-' + month;
					this.pickerDefaultTime = year + '-' + month + '-01';
				} else if (this.curTimeType == 2) {
					this.selectedTime = year;
					this.selectedTimeStr = year + '年';
					this.pickerDefaultTime = year + '-01-01';
				}
				this.$emit('curTimeChange');
			},
			
			//时间类型改变。0 月；1 季 ；2 年
			timeTypeChange(index) {
				this.curTimeType = index;
				this.resetNowTimeWithType(index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseTime {
		height: 50rpx;
	}
	.timeBtn {
		height: 50rpx;
		border: 1rpx solid #4EAAE6;
		border-radius: 10rpx;
		float: left;
		text-align: center;
		padding: 0rpx 25rpx;
		font-size: 29rpx;
		color: #333333;
	}
	
	.timeBtn-arrowDown {
		float: right;
		margin-left: 10rpx;
		margin-top: 15rpx;
	}
	
	.typeChange {
		width: 310rpx;
		float: right;
	}
</style>
